<template>
  <zm-view ref="view" background="#ffffff">
    <view class="flex flex-col p-24">
      <text class="flex font-42 font-bold mb-30">{{ information.title }}</text>
      <view class="flex items-center mb-30">
        <image v-if="information.labelId == 1" mode="scaleToFill" class="avatar" :src="useImage('/zuimei-film-oss/1.0.0/icons/new-icon.png')"></image>
        <image v-else-if="information.labelId == 2" mode="scaleToFill" class="avatar" :src="useImage('/zuimei-film-oss/1.0.0/icons/notice-icon.png')"></image>
        <image v-else-if="information.labelId == 3" mode="scaleToFill" class="avatar" :src="useImage('/zuimei-film-oss/1.0.0/icons/film-icon.png')"></image>
        <image v-else class="avatar" mode="scaleToFill" :src="useImage('/zuimei-film-oss/1.0.0/icons/hot-icon.png')"></image>
        <view class="flex flex-col">
          <text class="font-28">{{ information.labelName }}</text>
          <text class="font-28 text-666">{{ information.createTime | formatDate("YYYY-MM-DD HH:mm") }}</text>
        </view>
      </view>
      <zm-richtext :content="information.content"></zm-richtext>
    </view>
    <view v-if="information.quickAccess === '2'" class="flex items-center radius-16 bg-page px-20 py-30 mx-24" @click="onClickFilm">
      <view class="relative">
        <view v-for="(vitem, vindex) in versions" :key="vindex" class="film-version" :style="[versionStyle(vindex)]">{{ vitem }}</view>
        <view v-if="filmInfo.trailer" class="play-btn" @click.stop="handlePlayVideo">
          <zm-icon name="play" color="#333333" size="24rpx"></zm-icon>
        </view>
        <u-image :src="filmInfo.cover" width="120rpx" height="168rpx" radius="12rpx"></u-image>
      </view>
      <view class="flex flex-1 flex-col mx-15 mt-8 mb-auto">
        <text class="font-30 font-bold">{{ filmInfo.filmName }}</text>
        <view v-if="filmInfo.preSaleFlag == 0" class="hot-tag">正在热映</view>
        <view class="flex mt-14 items-center flex-1">
          <!-- 想看 -->
          <view v-if="filmInfo.preSaleFlag == 1 || filmInfo.preSaleFlag == 2" class="flex items-center">
            <text class="count-text font-bold font-26">{{ filmInfo.wantview | formatNumberWithUnit }}</text>
            <text class="ml-10">人想看</text>
            <view class="vertical-line"></view>
          </view>
          <!-- 上映时间 -->
          <view v-if="filmInfo.preSaleFlag == 1 || filmInfo.preSaleFlag == 2" class="text-666">{{ filmInfo.publishDate | formatWeekDesc }}上映</view>
          <!-- 评分 -->
          <view v-else class="flex items-center">
            <text>评分</text>
            <text v-if="filmInfo.score" class="count-text font-26 font-bold mx-2">{{ filmInfo.score | formatDigit({ decimalPlaces: 1, trimZero: false }) }}</text>
            <text v-else class="count-text font-26 font-bold mx-2">暂无评分</text>
            <view class="vertical-line"></view>
          </view>
        </view>
        <view class="text-666 text-row-1 mt-12">导演：{{ filmInfo.director }}</view>
        <view class="text-666 text-row-1 mt-10">主演：{{ filmInfo.cast }}</view>
      </view>
      <zm-button v-if="filmInfo.preSaleFlag == 0" custom-class="mt-10" size="small" width="104rpx" height="54rpx" round @click.stop="onClickBuy">购票</zm-button>
      <zm-button v-else-if="filmInfo.preSaleFlag == 1" custom-class="mt-10" type="success" size="small" width="104rpx" height="54rpx" round @click.stop="onClickBuy">预售</zm-button>
      <zm-button
        v-else-if="filmInfo.preSaleFlag == 2 && filmInfo.isCollect != 1"
        custom-class="mt-10"
        type="warning"
        size="small"
        width="104rpx"
        height="54rpx"
        round
        @click.stop="onClickCollect"
      >
        想看
      </zm-button>
      <zm-button
        v-else-if="filmInfo.preSaleFlag == 2 && filmInfo.isCollect == 1"
        custom-class="mt-10"
        type="default"
        size="small"
        width="104rpx"
        height="54rpx"
        text-size="26rpx"
        text-color="#999999"
        border-color="#cccccc"
        plain
        round
        @click.stop="onClickCollect"
      >
        已想看
      </zm-button>
      <!-- 预告视频预览 -->
      <film-trailer-popup ref="trailer" :src="filmInfo.trailer"></film-trailer-popup>
    </view>
    <view v-if="information.quickAccess === '2'" class="empty-view"></view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      filmId: "",
      filmInfo: {},
      information: {},
      informationId: "",
      matchColor: "#288E9B"
    }
  },
  computed: {
    ...mapGetters(["filmCoverColors"]),
    versions() {
      return this.filmInfo.versions?.filter((version) => !["2D", "3D"].includes(version)) || []
    },
    versionStyle() {
      return (index) => {
        const style = {}
        style.top = 8 + index * 30 + "rpx"
        return style
      }
    }
  },
  onLoad(options) {
    this.informationId = options.informationId
    this.handleGetInfo()
  },
  methods: {
    async handleGetInfo() {
      this.information = await uni.$api.information.getInformationInfo({ informationId: this.informationId })

      if (this.information.quickAccess == 2 && this.information.quickAccessValue) {
        this.filmId = this.information.quickAccessValue
        this.handleGetFilmInfo()
      }
    },
    async handleGetFilmInfo() {
      this.filmInfo = await uni.$api.film.getFilmInfo({ filmId: this.filmId })
      if (this.filmInfo.version) this.filmInfo.versions = this.filmInfo.version.split(",")
      if (this.filmInfo.score > 0) this.filmInfo.score = this.filmInfo.score / 10
    },
    onClickFilm() {
      this.toView({
        url: "pages/cinema/film-info/film-info",
        params: {
          color: this.matchColor,
          filmId: this.filmInfo.filmId,
          filmCode: this.filmInfo.filmCode
        }
      })
    },
    onClickBuy() {
      this.toView({
        url: "pages/cinema/cinema-list-film/cinema-list-film",
        params: {
          filmCode: this.filmInfo.filmCode,
          filmName: this.filmInfo.filmName,
          filmId: this.filmInfo.filmId,
          publishDate: this.filmInfo.publishDate
        }
      })
    },
    // 点击想看
    onClickCollect() {
      uni.$debounce(async () => {
        const res = await uni.$api.film.filmCollection({ filmId: this.filmInfo.filmId })
        this.filmInfo.isCollect = res.collectionType
        this.$forceUpdate()
        if (res.collectionType == 1) uni.$toast("已同步至我的想看页面")
        this.$emit("collect", this.filmInfo)
      }, 1000)
    },
    // 播放视频
    handlePlayVideo() {
      this.$refs.trailer.open()
    },
    // 颜色分析结果
    handleOnColorAnalysisFinish(colors) {
      if (colors?.length) {
        this.matchColor = colors[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 88rpx;
  height: 88rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}
.vertical-line {
  height: 16rpx;
  margin: 0 10rpx;
  border-left: 2rpx solid #eee;
}
.count-text {
  color: #ffa51a;
}
.hot-tag {
  color: #ffa51a;
  height: 28rpx;
  display: flex;
  padding: 0 6rpx;
  font-size: 18rpx;
  margin-top: 12rpx;
  align-items: center;
  border-radius: 6rpx;
  margin-right: auto;
  justify-content: center;
  border: 1rpx solid #ffa51a;
}
.film-version {
  top: 8rpx;
  left: 8rpx;
  z-index: 1;
  height: 26rpx;
  display: flex;
  padding: 0 6rpx;
  font-size: 18rpx;
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  border-radius: 4rpx;
  align-items: center;
  background-color: #000000;
}
.play-btn {
  z-index: 1;
  right: 12rpx;
  bottom: 12rpx;
  width: 46rpx;
  height: 46rpx;
  display: flex;
  position: absolute;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
}
.empty-view {
  width: 100%;
  height: 100rpx;
}
</style>
